<?php
require_once('config.php');
// 查询所有管理员信息
$sql = "SELECT * FROM librarian ORDER BY id";
$stmt = $connect->prepare($sql);
if (!$stmt) {
    die("预处理语句失败: " . $connect->error);
}
$stmt->execute();
$info = $stmt->get_result();

// 分页参数
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$limit = 2; // 每页显示2条记录
$offset = ($page - 1) * $limit;
$totalRecords = mysqli_num_rows($info);
$totalPages = ceil($totalRecords / $limit);


$sql = "SELECT * FROM librarian ORDER BY id LIMIT $limit OFFSET $offset";
$stmt = $connect->prepare($sql);
$stmt->execute();
$currentPageData = $stmt->get_result();
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>图书管理员管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        neutral: '#F2F3F5',
                        'neutral-dark': '#C9CDD4',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .transition-custom {
                transition: all 0.3s ease;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/30 focus:border-primary;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter">
    <div class="flex h-screen overflow-hidden">
        <div class="flex-1 flex flex-col overflow-hidden">
            <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
                <div class="max-w-6xl mx-auto">
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                        <div class="p-6 border-b border-gray-100">
                            <div class="flex justify-between items-center">
                                <h2 class="text-lg font-semibold text-gray-800">管理员列表</h2>
                                <a href="update_admin.php" class="bg-primary text-white px-4 py-2 rounded-lg btn-hover flex items-center">
                                    <i class="fa fa-plus mr-2"></i>添加管理员
                                </a> 
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead class="bg-gray-50">
                                    <tr>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">用户名</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">角色</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">最后登录</th>
                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                                        <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                    <?php
                                    if ($currentPageData !== null && mysqli_num_rows($currentPageData) > 0) {
                                        while($row=mysqli_fetch_array($currentPageData)){
                                            // 获取实时的上次登录时间
                                            $lastLoginTime = $row['last_login_time']; // 假设数据库表中有 last_login_time 字段
                                    ?>
                                    <tr class="hover:bg-gray-50 transition-custom">
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900"><?php echo $row['id'];?></td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-200 overflow-hidden">
                                                    <img src="https://picsum.photos/200/200?random=<?php echo $row['id'];?>" alt="用户头像" class="w-full h-full object-cover">
                                                </div>
                                                <div class="ml-4">
                                                    <div class="text-sm font-medium text-gray-900"><?php echo $row['username'];?></div>
                                                    <div class="text-sm text-gray-500"><?php echo $row['username']?>@library.com</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                                系统管理员
                                            </span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <?php echo $lastLoginTime; ?>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                                活跃
                                            </span>
                                        </td> 
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <a href="delete_admin.php?id=<?php echo $row['id'];?>" class="text-red-600 hover:text-red-800 transition-custom">
                                                <i class="fa fa-trash mr-1"></i>删除
                                            </a>
                                        </td>
                                    </tr>
                                    <?php
                                        }
                                    } else {
                                        echo "<tr><td colspan='6' class='px-6 py-4 text-center text-gray-500'>暂无管理员数据</td></tr>";
                                    }
                                    ?>
                                </tbody>
                            </table>
                        </div>
                        <div class="p-4 border-t border-gray-100 flex justify-between items-center">
                            <div class="text-sm text-gray-500">
                                显示 <?php echo ($offset + 1); ?> 到 <?php echo min($offset + $limit, $totalRecords); ?> 条，共 <?php echo $totalRecords; ?> 条记录
                            </div>
                            <div class="flex space-x-1">
                                <a href="?page=1" class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 <?php if($page == 1) echo 'disabled opacity-50 pointer-events-none'; ?>">
                                    <i class="fa fa-angle-double-left"></i>
                                </a>
                                <a href="?page=<?php echo max(1, $page - 1); ?>" class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 <?php if($page == 1) echo 'disabled opacity-50 pointer-events-none'; ?>">
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                                
                                <?php
                                // 显示当前页和前后几页的页码
                                $startPage = max(1, $page - 2);
                                $endPage = min($totalPages, $startPage + 4);
                                if ($endPage - $startPage < 4 && $startPage > 1) {
                                    $startPage = max(1, $endPage - 4);
                                }
                                
                                for ($i = $startPage; $i <= $endPage; $i++) {
                                    if ($i == $page) {
                                        echo "<button class='px-3 py-1 rounded-md border border-primary bg-primary text-sm font-medium text-white'>$i</button>";
                                    } else {
                                        echo "<a href='?page=$i' class='px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50'>$i</a>";
                                    }
                                }
                                
                                // 如果有更多页码，显示省略号
                                if ($endPage < $totalPages) {
                                    echo "<span class='px-3 py-1 text-gray-500'>...</span>";
                                    echo "<a href='?page=$totalPages' class='px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50'>$totalPages</a>";
                                }
                                ?>
                                
                                <a href="?page=<?php echo min($totalPages, $page + 1); ?>" class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 <?php if($page == $totalPages) echo 'disabled opacity-50 pointer-events-none'; ?>">
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                                <a href="?page=<?php echo $totalPages; ?>" class="px-3 py-1 rounded-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 <?php if($page == $totalPages) echo 'disabled opacity-50 pointer-events-none'; ?>">
                                    <i class="fa fa-angle-double-right"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 修改密码卡片 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="p-6 border-b border-gray-100">
                            <h2 class="text-lg font-semibold text-gray-800">修改管理员密码</h2>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                <div class="lg:col-span-1">
                                    <div class="bg-gray-50 rounded-lg p-6">
                                        <div class="flex flex-col items-center">
                                            <div class="w-24 h-24 rounded-full bg-gray-200 overflow-hidden mb-4">
                                                <img src="https://picsum.photos/200/200?random=10" alt="管理员头像" class="w-full h-full object-cover">
                                            </div>
                                            <h3 class="text-lg font-semibold text-gray-800 mb-1"><?php echo $username ?? '管理员'; ?></h3>
                                            <p class="text-sm text-gray-500 mb-4">系统管理员</p>
                                            <div class="w-full space-y-3">
                                                <div class="flex items-center">
                                                    <i class="fa fa-id-card text-primary mr-3"></i>
                                                    <span class="text-sm text-gray-700">管理员 ID: <?php echo $id ?? '001'; ?></span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fa fa-envelope text-primary mr-3"></i>
                                                    <span class="text-sm text-gray-700">邮箱: admin@library.com</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fa fa-calendar text-primary mr-3"></i>
                                                    <span class="text-sm text-gray-700">注册日期: 2025-5-26</span>
                                                </div>
                                                <div class="flex items-center">
                                                    <i class="fa fa-clock-o text-primary mr-3"></i>
                                                    <span class="text-sm text-gray-700">上次登录: 2025-06-4 09:42</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- 右侧修改密码表单 -->
                                <div class="lg:col-span-2">
                                    <div class="bg-white rounded-lg p-6 border border-gray-100">
                                        <form name="renpassword" method="post" action="">
                                            <div class="mb-6">
                                                <label for="password" class="block text-sm font-medium text-gray-700 mb-1">原密码</label>
                                                <div class="relative">
                                                    <input type="password" id="password" name="password" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none input-focus transition-custom" placeholder="请输入原密码">
                                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <button type="button" class="text-gray-400 hover:text-gray-600" id="toggle-password">
                                                            <i class="fa fa-eye-slash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="mb-6">
                                                <label for="password1" class="block text-sm font-medium text-gray-700 mb-1">新密码</label>
                                                <div class="relative">
                                                    <input type="password" id="password1" name="password1" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none input-focus transition-custom" placeholder="请输入新密码">
                                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <button type="button" class="text-gray-400 hover:text-gray-600" id="toggle-password1">
                                                            <i class="fa fa-eye-slash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="mt-2 text-xs text-gray-500">
                                                    密码长度至少8位，包含大小写字母、数字和特殊字符
                                                </div>
                                            </div>
                                            
                                            <div class="mb-6">
                                                <label for="password2" class="block text-sm font-medium text-gray-700 mb-1">确认新密码</label>
                                                <div class="relative">
                                                    <input type="password" id="password2" name="password2" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none input-focus transition-custom" placeholder="请再次输入新密码">
                                                    <div class="absolute inset-y-0 right-0 flex items-center pr-3">
                                                        <button type="button" class="text-gray-400 hover:text-gray-600" id="toggle-password2">
                                                            <i class="fa fa-eye-slash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="flex justify-end space-x-3">
                                                <!-- <button type="button" class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50 btn-hover">
                                                    取消
                                                </button> -->
                                                <button type="submit" name="Submit" class="px-6 py-3 bg-primary text-white rounded-lg font-medium btn-hover">
                                                    确认修改密码
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <script>
        // 禁止右键菜单
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
        });

        // 禁止复制
        document.addEventListener('copy', function(e) {
            e.preventDefault();
        });

        // 禁止图片拖拽
        document.querySelectorAll('img').forEach(img => {
            img.addEventListener('dragstart', function(e) {
                e.preventDefault();
            });
        });

        // 密码显示/隐藏切换功能
        function setupPasswordToggle(toggleId, passwordId) {
            const toggle = document.getElementById(toggleId);
            const passwordInput = document.getElementById(passwordId);
            
            toggle.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                
                // 切换图标
                toggle.querySelector('i').classList.toggle('fa-eye');
                toggle.querySelector('i').classList.toggle('fa-eye-slash');
            });
        }
        
        setupPasswordToggle('toggle-password', 'password');
        setupPasswordToggle('toggle-password1', 'password1');
        setupPasswordToggle('toggle-password2', 'password2');
    </script>
</body>
</html>